<template>
  <!------------------ 1. 顶部导航 ----------------------->
  <van-nav-bar title="购物车" left-arrow @click-left="backToPage"/>
  <!------------------ 2. 购物车商品列表 ------------------>
  <div class="cart-list" v-if="isEmpty">
    <CartItem
      v-for="item in cartList"
      :key="item.id"
      :itemData="item"
    />
    <!-- <CartItem />
    <CartItem />
    <CartItem /> -->
  </div>
  <!-- 购物车为空的时候展示 -->
  <van-empty description="购物车还没有商品哦！" v-else />
  <!------------------ 3. 底部结算栏 ---------------------->
  <!-- 绑定状态管理器中总价 cartStore.totalPrice * 100，之所以 * 100，是因为当前组件会把 price 绑定的数字 3050 转换为 30.50 -->
  <van-submit-bar :price="cartStore.totalPrice * 100" button-text="去结算" @submit="onSubmit">
    <!-- 绑定状态管理器中的全选按钮状态 -->
    <van-checkbox v-model="checkedAll" checked-color="#ee0a24">全选</van-checkbox>
  </van-submit-bar>
  <!------------------ 4. 底部导航 ------------------------>
  <LayoutFooter></LayoutFooter>
</template>

<script setup>
import LayoutFooter from '@/components/LayoutFooter.vue'
import CartItem from './components/CartItem.vue'
import { computed, nextTick } from 'vue'
import { getCartList } from '@/api/cart.js'
import useStore from '@/store/index.js'
import { useRouter } from 'vue-router'

// 1. 返回上一页
const backToPage = () => {
  history.back()
}

/* ------------------------- 购物车操作 ------------------------------- */
// 1. 创建购物车状态管理器实例
const { cartStore } = useStore()
// 2. 获取状态管理器保存的购物车列表数据
const cartList = computed(() => cartStore.cartList)
// 4. 购物车是否为空的状态
const isEmpty = computed(() => cartStore.cartList.length !== 0)
// 4. 初始化加载购物车商品列表数据
const initCartList = async () => {
  // 4.1 发送请求
  const { data } = await getCartList()
  console.log(data)
  // 4.2 响应是否成功
  if (data.status !== 200) { return }
  // 4.3 请求新数据后，将状态管理器原始的数据清空，随后更新为新数据
  cartStore.clearCartList()

  // 4.4 等待原有状态清空后，再添加新的购物车数据，
  // 避免了清空数据和添加数据，这两个操作因为处理速度不同或者渲染快慢，而导致的页面显示异常的情况
  await nextTick()

  // 4.5 循环购物车列表数据，将每一项需要的数据通过 pinia 进行状态管理
  data.data.valid.forEach(item => {
    // 调用状态管理器中的函数 setCartList
    cartStore.setCartList({
      id: item.id,
      checked: item.attrStatus,
      count: item.cart_num,
      image: item.productInfo.image,
      title: item.productInfo.store_name,
      price: item.truePrice,
      stock: item.trueStock,
      productId: item.product_id
    })
  })
}
initCartList()
// 5. 通过计算属性，获取或者设置全选按钮的状态
const checkedAll = computed({
  // 获取状态
  get () {
    return cartStore.checkedAll
  },
  // 设置状态
  set (newChecked) {
    cartStore.changeAll(newChecked)
  }
})

// 6. 结算按钮触发的函数，跳转到订单确认页面 CategoryDetail/index.vue
const router = useRouter()
const onSubmit = () => {
  // 如果路由地址没有设置参数（/order-detail/:orderId），那么通过 params 传参会失败，所以借助 history 对象中的 state 进行传参
  router.push({
    name: 'order-confirm',
    state: {
      // cartId 指的是购物车列表被选中商品项 id 的集合：491,486,485,469,470
      cartId: cartStore.checkedItem.map(item => item.id).toString()
    }
  })
}
</script>
<style lang="scss" scoped>
// ------------------ 1. 顶部导航 -----------------------
.van-nav-bar {
  position: fixed !important;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}
// ------------------ 2. 购物车商品列表 ------------------
.cart-list {
  margin: 50px 0 100px;
  background-color: #f2f2f2;
}
// ------------------ 3. 底部结算栏 ----------------------
.van-submit-bar {
  bottom: 51px;
}
</style>
